<script lang="ts" setup>
import { get, post, message, loadFile, openWindow, checkBtnPermission } from '@/utils'
import useTable from '@/hooks/useTable'
import { useClipboard } from '@vueuse/core'
import PreviewPage from './components/PreviewPage.vue'
import { BtnPermission } from '@/enum/permission'
import useModal from '@/hooks/useModal'
const router = useRouter()
const { store } = useModal()
const { copy } = useClipboard()
const { formatColumns } = useTable()
const formRef = ref()
const actionRef = ref()
const searchQuery = reactive({})
const pagination = {
  showPageSize: true,
  pageSize: 20,
}

const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-shop/admin/adorn/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}

const columns = formatColumns([
  {
    title: 'ID',
    dataIndex: 'id',
    width: 200,
    copyable: true,
  },
  {
    title: '页面名称',
    dataIndex: 'name',
    width: 200,
  },

  {
    title: '状态',
    dataIndex: 'isUse',
    width: 90,
    hideInTable: false,
    valueEnum: {
      1: { text: '启用', status: 'Success' },
      0: { text: '禁用', status: 'Error' },
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 200,
  },
  {
    title: '操作',
    dataIndex: 'options',
    width: 450,
    fixed: 'right',
    btnList: [
      {
        name: '设为首页',
        type: 'popconfirm',
        tip: '确认将该配置设为首页吗?',
        permission: BtnPermission.编辑,
        disabled: ({ record }) => record.isUse == 1,
        handle: ({ record }) => {
          post({ url: '/server-shop/admin/adorn/update/use', data: { id: record.id } }, ({ code, msg }) => {
            if (code == 200) actionRef.value.reload()
            message({
              type: code == 200 ? 'success' : 'error',
              content: msg,
            })
          })
        },
      },
      {
        name: '编辑',
        permission: BtnPermission.编辑,
        handle: ({ record }) => to(record.id),
      },
      {
        name: '删除',
        type: 'popconfirm',
        permission: BtnPermission.删除,
        tip: '确认删除该数据吗?',
        handle: ({ record }) => {
          post({ url: '/server-shop/admin/adorn/remove?ids=' + record.id }, ({ code, msg }) => {
            if (code == 200) actionRef.value.reload()
            message({
              type: code == 200 ? 'success' : 'error',
              content: msg,
            })
          })
        },
      },
      {
        name: '复制小程序链接',
        handle: ({ record }) => {
          get(
            {
              url: '/server-auth/wechat/url/link',
              data: {
                url: 'pages/diyPage/diyPage',
                query: 'id=' + record.id,
              },
            },
            async ({ data }) => {
              try {
                const res = await copy(data)
                message({
                  type: 'success',
                  content: '复制成功',
                })
              } catch (error) {
                message({
                  type: 'error',
                  content: '复制失败',
                })
              }
            }
          )
        },
      },
      {
        name: '复制链接',
        handle: async ({ record }) => {
          try {
            const res = await copy('http://xpj40szpt.signalpha.cn/h5/pages/diyPage/diyPage?id=' + record.id)
            message({
              type: 'success',
              content: '复制成功',
            })
          } catch (error) {
            message({
              type: 'error',
              content: '复制失败',
            })
          }
        },
      },
      {
        name: '预览',
        handle: ({ record }) => store.handleShow(record),
      },
    ],
  },
])
const to = (id = '') => {
  openWindow(window.location.origin + '/web-admin/#/visualEditor/index?id=' + id, { target: '_blank' })
}
</script>
<template>
  <div class="page">
    <ProTable :columns="columns" :request="request" row-key="id" :form-ref="ref => (formRef = ref)" :pagination="pagination" header-title="" column-resizable :scroll="{ x: 1000 }" :params="searchQuery" :bordered="{ cell: true }" :action-ref="ref => (actionRef = ref)">
      <template #option-render="{ dom, reset }">
        <!-- <component :is="dom[1]" />
          <component :is="dom[0]" /> -->
        <a-button type="primary" @click="to()">
          <template #icon>
            <icon-plus />
          </template>
          新建</a-button
        >
      </template>
      <template #money="{ record }">
        <a-button type="text">{{ record.money }}</a-button>
      </template>
    </ProTable>
  </div>
  <PreviewPage v-if="store.show" v-model:show="store.show" :id="store.id" />
</template>
<style lang="less" scoped></style>
